import {
  DrawerForm,
  ProForm,
  ProFormCheckbox,
  ProFormInstance,
  ProFormList,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import {  message } from 'antd';
import React, { useEffect, useRef } from 'react';
import { getStoreCate, getStoreList } from '../service';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.RuleListItem>;
};

const AddCommandForm: React.FC<any> = (props) => {
  const formRef = useRef<ProFormInstance>();
  const [form] = ProForm.useForm();

  return (
    <DrawerForm
      title="添加口令"
      width="620px"
      formRef={formRef}
      form={form}
      visible={props.updateModalVisible}
      onVisibleChange={(val) => {
        if (!val) {
          props.onCancel();
        }
       
      }}
      onFinish={async (values) => {
       
        props.onSubmit(values);
      }}
    >
      <ProFormText
        name="shopName"
        width="md"
        label="直播间名称"
        placeholder="请输入店铺"
        rules={[{ required: true, message: '请输入店铺!' }]}
      /> 
      <ProFormText
        name="keyword"
        width="md"
        label="关键词"
        placeholder="请输入关键词"
        rules={[{ required: true, message: '请输入关键词!' }]}
      /> 
      <ProFormText
        name="ratio"
        width="md"
        label="佣金比例"
        placeholder="请输入佣金比例"
      /> 
     
    </DrawerForm>
  );
};

export default AddCommandForm;
